<%@page import="java.util.List"%>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>报修申请</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="description" content="北京规划院 移动办公 OA 自动化">
		<link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
		<link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.1.1/css/jquery-weui.min.css">
		<link rel="stylesheet" type="text/css" href="${base}/css/font-awesome-4.7.0/css/font-awesome.css" />
		<%
		    String appid  = (String)request.getAttribute("appId");
		    String nonceStr  = (String)request.getAttribute("nonceStr");
		    String timestamp = (String)request.getAttribute("timestamp");//10
		    String signature = (String)request.getAttribute("signature");
		    String userid=(String)request.getAttribute("loginuser");		  		    
		%>
		<style>
			.weui-cells {
				margin-top: 8px;
			}
			
			.weui-flex__item {
				margin: 8px
			}
			
			.weui-mask,
			.weui-dialog {
				opacity: 1;
				visibility: visible;
			}
			
			.weui-dialog__bd {
				line-height: 40px
			}
			
			.weui-uploader__file_status:before {
				background-color: rgba(0, 0, 0, 0.2);
			}
			
			.weui-uploader__file {
				margin-right: 5px;
			}
			
			.weui-label i {
				margin-right: 2px;
			}
			
			i {
				width: 18px;
			}
		</style>
	</head>

	<body style="background: #F4F4F4;">
		<div class="page" id="container">
			<div class="weui-cells weui-cells_form" style="margin-top:0">
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label"><i class="fa fa-user"></i>报修人</label></div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" placeholder="请输入你的姓名" id="bxr">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label"><i class="fa fa-phone"></i>联系电话</label></div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="number" placeholder="请输入你的手机号或分机号" id="phone">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label"><i class="fa fa-map-marker"></i>维修位置</label></div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" placeholder="请输入报修位置" id="bxposition">
					</div>
				</div>
			</div>
			<div class="weui-cells weui-cells_form">
				<div class="weui-cell weui-cell_switch">
					<div class="weui-cell__bd"><i class="fa fa-fire" style="margin-right: 3px;"></i>紧急情况</div>
					<div class="weui-cell__ft">
						<input class="weui-switch" type="checkbox" id="urgent">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<textarea class="weui-textarea" placeholder="报修详情" rows="3" id="bxdetail"></textarea>
						<div class="weui-textarea-counter"><span id="length">0</span>/200</div>
					</div>
					<div class=weui-cell__ft> <i class=weui-icon-warn></i> </div>
				</div>
			</div>
			<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<div class="weui-uploader">
							<div class="weui-uploader__hd">
								<p class="weui-uploader__title"><i class="fa fa-upload" style="margin-right: 3px;"></i>图片上传(长按删除)</p>
								<div class="weui-uploader__info">0/6</div>
							</div>
							<div class="weui-uploader__bd">
								<ul class="weui-uploader__files" id="uploaderFiles">
								</ul>
								<div class="weui-uploader__input-box" id="uploaderInput">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="weui-flex" style="margin-top:50px;width: 100%;">
				<div class="weui-flex__item" id="sumbit">
					<div class="placeholder">
						<a href="javascript:;" class="weui-btn weui-btn_primary">提交</a>
					</div>
				</div>
				<div class="weui-flex__item">
					<div class="placeholder">
						<a href="javascript:;" class="weui-btn weui-btn_default">返回</a>
					</div>
				</div>
			</div>
		</div>
		<div class="page dialog js_show">
			<div id="dialogs">
				<!--BEGIN dialog2-->
				<div class="js_dialog" id="iosDialog2" style="display:none">
					<div class="weui-mask"></div>
					<div class="weui-dialog">
						<div class="weui-dialog__hd"><strong class="weui-dialog__title">提交成功！</strong></div>
						<div class="weui-dialog__bd">3s后将跳转至我的保修单页面</div>
						<div class="weui-dialog__ft">
							<!-- <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a> -->
						</div>
					</div>
				</div>
				<!--END dialog2-->
			</div>
		</div>
		<div class="js_dialog" id="iosDialog3" style="display:none">
			<div class="weui-mask"></div>
			<div class="weui-dialog">
				<div class="weui-dialog__hd"><strong class="weui-dialog__title"></strong></div>
				<div class="weui-dialog__bd"></div>
				<div class="weui-dialog__ft">
					<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" onclick="dialogHide()">确定</a>
				</div>
			</div>
		</div>
		<script src="${base}/js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="${base}/js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
		<script src="${base}/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$.post("getUser", {
				userid: '<%=userid %>'
			}, function(data) {
				$("#bxr").val(data.username);
				$("#phone").val(data.mobile);
			})
			$.ajaxSettings.async = false;
			wx.config({
				beta: true,
				debug: false,
				appId: '<%=appid %>',
				timestamp: '<%=timestamp %>',
				nonceStr: '<%=nonceStr %>',
				signature: '<%=signature %>',
				jsApiList: [
					'checkJsApi',
					'onMenuShareAppMessage',
					'onMenuShareWechat',
					'startRecord',
					'stopRecord',
					'onVoiceRecordEnd',
					'playVoice',
					'pauseVoice',
					'stopVoice',
					'uploadVoice',
					'downloadVoice',
					'chooseImage',
					'previewImage',
					'uploadImage',
					'downloadImage',
					'getNetworkType',
					'openLocation',
					'getLocation',
					'hideOptionMenu',
					'showOptionMenu',
					'hideMenuItems',
					'showMenuItems',
					'hideAllNonBaseMenuItem',
					'showAllNonBaseMenuItem',
					'closeWindow',
					'scanQRCode',
					'previewFile',
					'openEnterpriseChat',
					'selectEnterpriseContact',
					'onHistoryBack'
				]
			});
			wx.checkJsApi({
				jsApiList: ['openEnterpriseChat'], // 需要检测的JS接口列表，所有JS接口列表见附录2,

				success: function(res) {
					alert(res)
				}
				// 以键值对的形式返回，可用的api值true，不可用为false

			});
			var serverIds = [];
			var imgnum = 0;
			var localIds
			$("#uploaderInput").click(function() {
				if(imgnum >= 6) {

				}
				wx.chooseImage({
					count: 6, //设置一次能选择的图片的数量 
					sizeType: ['original', 'compressed'], //指定是原图还是压缩,默认二者都有
					sourceType: ['album', 'camera'], //可以指定来源是相册还是相机,默认二者都有
					success: function(res) { //微信返回了一个资源对象 
						　　　　　　　　　 //res.localIds 是一个数组　保存了用户一次性选择的所有图片的信息　 　　　　　　　　
						localIds = res.localIds; //把图片的路径保存在images[localId]中--图片本地的id信息，用于上传图片到微信浏览器时使用
						ulLoadToWechat(0); //把这些图片上传到微信服务器  一张一张的上传
						imgnum += localIds.length
						$(".weui-uploader__info").html(imgnum + "/6")
						var html = "";
						for(var i = 0; i < localIds.length; i++) {
							html += '<li class="weui-uploader__file weui-uploader__file_status" data-url="' + localIds[i] + '" style="background-image:url(' + localIds[i] + ')"></li>'
						}
						$("#uploaderFiles").append(html)
					}
				});
			})
			//上传图片到微信
			function ulLoadToWechat(i) {
				length = localIds.length; //本次要上传所有图片的数量
				wx.uploadImage({
					localId: localIds[i], //图片在本地的id
					success: function(res) { //上传图片到微信成功的回调函数   会返回一个媒体对象  存储了图片在微信的id
						serverIds.push(res.serverId);
						i++;
						if(i < length) {
							ulLoadToWechat(i);
						}
					},
					fail: function(res) {
						alert(JSON.stringify(res));
					}
				});
			};
			$("#uploaderFiles").on("click", "li", function() {
				wx.previewImage({
					current: '', // 当前显示图片的http链接
					urls: localIds // 需要预览的图片http链接列表
				});
			})
			$("#sumbit").click(function() {
				var bxr = $("#bxr").val();
				if(bxr == "") {
					$("#iosDialog3 .weui-dialog__title").html("报修人不能为空！")
					$("#iosDialog3 .weui-dialog__bd").hide()
					$("#iosDialog3").show()
					return
				}
				var phone = $("#phone").val();
				if(phone == "") { //判断手机格式是否正确
					$("#iosDialog3 .weui-dialog__title").html("联系电话不能为空！")
					$("#iosDialog3 .weui-dialog__bd").hide()
					$("#iosDialog3").show()
					return
				}
				var bxposition = $("#bxposition").val();
				if(bxposition == "") {
					$("#iosDialog3 .weui-dialog__title").html("请输入报修位置！")
					$("#iosDialog3 .weui-dialog__bd").hide()
					$("#iosDialog3").show()
					return
				}
				var urgent = $("#urgent")[0].checked;
				var bxdetail = $("#bxdetail").val();
				if(bxdetail == "") {
					$("#iosDialog3 .weui-dialog__title").html("请输入详情，方便工作人员准备！")
					$("#iosDialog3 .weui-dialog__bd").hide()
					$("#iosDialog3").show()
					return
				}
				var serverid = serverIds.toString()
				var params = {
					bxr: bxr,
					phone: phone,
					bxposition: bxposition,
					urgent: urgent,
					bxdetail: bxdetail,
					serverid: serverid
				}
				$.post("bxCreateSubmit", params, function(data) {
					if(data.res == true) {
						$('#iosDialog2').show()
						var i = 3;
						setInterval(function() {
							i--;
							$(".weui-dialog__bd").html(i + "s后将跳转至我的保修单页面")
							if(i == 0) {
								location.href = "mybx?status=B" //B
							}
						}, 1000)
					} else {
						$("#iosDialog3 .weui-dialog__title").html("提交失败!")
						$("#iosDialog3 .weui-dialog__bd").hide()
						$("#iosDialog3").show()
					}
				})
			})

			function dialogHide() {
				$("#iosDialog2").hide()
				$("#iosDialog1").hide()
				$("#iosDialog3").hide()
			}
			$("#bxdetail").on('input', function() {
				var length = $(this).val().length;
				$('#length').html(length)
			})
			var time = 0; //初始化起始时间  

			$("#uploaderFiles").on('touchstart', 'li', function(e) {
				var index=$("#uploaderFiles li").index(this)
				if($(this).html()==""){
					var html = '<span class="weui-badge" style="margin-left: 80%;position: absolute;top: 0px" data-index='+index+'>X</span>'
					$(this).append(html)
				}
			});
			$("#uploaderFiles").on("mousedown","li .weui-badge",function(){
			    timeout = setTimeout(function() {  
			    }, 2000);  
			});  
			   
			$("#uploaderFiles").on("mouseup","li .weui-badge",function(){ 
			    clearTimeout(timeout);  
			    var index=$(this).attr("data-index");
				serverIds.splice(index,1)
				$(this).parent().remove();
				imgnum--
				$(".weui-uploader__info").html(imgnum + "/6")
			});  
		</script>
	</body>

</html>